<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>隐藏显示</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: palegreen;
				margin-bottom: 10px;
			}
			#box2{
				display: none;
			}
		</style>
		<script>
			//鼠标进入，另一个盒子出现
			function bigger(){
				document.getElementById("box2").style.display="block";
				document.getElementById("box2").style.backgroundColor="palevioletred";
				document.getElementById("box2").style.width="300px";
				document.getElementById('box2').style.height='300px';
				document.getElementById('box2').style.border='2px solid blue';
			}
			
			//鼠标离开，另一个盒子隐藏
			function yincang(){
				document.getElementById("box2").style.display="none";
			}
		</script>
	</head>
	<body>
		<div onmouseover='bigger()' onmouseout="yincang()"></div>
		<div id="box2"></div>
	</body>
</html>
